<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>网站测试模板</title>
    <meta name="keywords" content=""/>
    <meta name="description" content="">

    <!--公共头部，负责加载公共 css，和其它资源，放在 head.html-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__TMPL__/public/assets/layui/layui/css/layui.css"  media="all">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--本页面自定义的样式，或其它资源-->

</head>
<style>
    nav{
        margin: 0; padding: 0;
        list-style: none;
        width: auto;

    }
    .jh-nav{
        display: inline-block;
        width: 845px;
        margin:0 auto;

    }
    .jh-width-child{
        width: auto;
        margin-left: 50px;
        clear: both;
    }

    .jh-font-20{
        font-size: 20px;
    }
    nav, ul, .jh-color-white{
        color: #ffffff;
    }
    .jh-relative{
        position: relative;
    }
    #operation{
        background-image: url("__TMPL__/public/assets/layui/images/a1.jpg");
        background-size:100% 100%;
        -webkit-filter:blur(4px);
    }
    em{
        position:fixed;
        background:#2f4056;
        opacity:0.8;
        filter:alpha(opacity=60);
        left:0;
        z-index:-1;
        width: 100%;
        height:100%;
    }
</style>
Hello {$theme_vars.name|default='ThinkCMF'}!
<!--<include file="public@nav"/>-->
<!--主要内容-->
<!-- 背景轮播 -->

<div class="layui-carousel" id="test1">

    <include file="public@nav"/>

    <div carousel-item>
        <!-- 首页轮播图 -->
        <div style="background-color: #2FBC5E" >
            <php>
                $top_slide_id = empty($theme_vars['top_slide'])?1:$theme_vars['top_slide'];
            </php>
            <div class=" " id="slide">
                <div>
                    <slides id="$top_slide_id">
                        <li>
                            <a href="{$vo.url|default=''}"><img src="{:cmf_get_image_url($vo.image)}" alt=""></a>
                        </li>
                    </slides>
                </div>
            </div>
        </div>
        <div id="operation" style="background-color:#7b8a8b; ">
            <em></em>
            业务

            </div>
        <div style="background-color:#A5DC86; ); ">条目3</div>
        <div style="background-color:#f8b9b7;); ">条目4</div>
    </div>
</div>


<!--公共底部，放在 footer.html-->
<!--公共js文件，放在scripts.html-->
<!--本页面自定义的js-->

</body>

<script src="__TMPL__/public/assets/layui/layui/layui.js" charset="utf-8"></script>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });

    //**********背景轮播
    var ins;
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
       ins = carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            //,height:'700px' //设置容器高度
            ,full: true //是否全屏
            ,arrow: 'none' //始终显示箭头
            ,anim: 'updown' //切换动画方式
            ,autoplay: false //关闭自动切换
            ,indicator:'none'// 不显示指示器位置
        });
    });
    //移动端手势左右*上下滑动效果
    $("#test1").on("touchstart", function (e) {
        var startX = e.originalEvent.targetTouches[0].pageX;//开始坐标X
        var startY = e.originalEvent.targetTouches[0].pageY //开始坐标Y
        $(this).on('touchmove', function (e) {
            arguments[0].preventDefault();//阻止手机浏览器默认事件
        });
        $(this).on('touchend', function (e) {
            var endX = e.originalEvent.changedTouches[0].pageX;//结束坐标X
            var endY = e.originalEvent.changedTouches[0].pageY;//结束坐标Y
            e.stopPropagation();//停止DOM事件逐层往上传播
            if (endX - startX > 20 || endY - startY > 20 ) {
                ins.slide("sub");
            }
            else if (startX - endX > 20 || startY - endX > 20) {
                ins.slide("add");
            }
            $(this).off('touchmove touchend');
        });
    });
   //pc端鼠标滑块滚动
    $('#test1').on('mousewheel DOMMouseScroll', function(event) {
       // console.log(event.originalEvent.wheelDelta);
        var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
            (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));//火狐

        var i = 0;
        if(delta > 0){
            while(i < delta){
                i++;
                ins.slide("sub");
               // console.log("wheelup");
            }
        }
        else if(delta < 0){
            while(i > delta){
                i--;
                ins.slide("add");
                //console.log("wheeldown");
            }
        }
    });

    //轮播图
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#slide'
            ,width: '100%' //设置容器宽度
            ,height:'600px' //设置容器高度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

</html>